<template>
  <div>
    <!-- 显示用户的token的网站的名称 -->
    <div>用户的token: {{ $store.state.user.token }}</div>
    <div>getters快捷访问：{{ token }}</div>
    <div>网站的名称：{{ $store.state.setting.name }}</div>
    <div>getters快捷访问：{{ name }}</div>
    <button @click="updateToken">更新子模块的token</button>
  </div>
</template>

<script>
import {mapGetters, createNamespacedHelpers} from 'vuex'

/**
 * 而且，你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。
 * 它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：
 */
const {mapMutations} = createNamespacedHelpers('user')
export default {
  name: "BasicApiTwelve",
  computed: {
    ...mapGetters(['token', 'name'])
  },
  methods: {
    // 第二种写法
    //  ...mapMutations(['updateToken'])
    updateToken() {
      //采用路径形式调用
      this.$store.commit('user/updateToken')
    }
  }
}
</script>

<style scoped>

</style>
